<template>
	<view class="evaluate-container">
		<!-- 顶部栏 -->
		<view class="evaluate-header">
			<uni-icons type="left" size="18" class="back-arrow" @click="goBack" />
			<!-- <text class="back-arrow" @click="goBack">&#60;</text> -->
			<text class="header-title">汽车保养</text>
		</view>
		<!-- 服务评价卡片 -->
		<view class="card">
			<view class="card-title">服务评价</view>
			<view class="divider"></view>
			<view class="service-row">
				<image class="shop-img" src="/static/fy/shop.jpg" mode="aspectFill" />
				<view class="shop-info">
					<text class="shop-name">{{ shop_name }}</text>
					<view class="star-row">
						<image v-for="i in 5" :key="i" :src="i <= star ? '/static/fy/star-on.png' : '/static/fy/star-off.png'" class="star-img" @click="setStar(i)" />
					</view>
				</view>
			</view>
		</view>
		<!-- 评语卡片 -->
		<view class="card">
			<uni-section title="评价星级" subTitle="你愿意给本次服务打几分" type="line" padding>
				<uni-rate :value="submitInfo.rate" v-model="submitInfo.rate" />
			</uni-section>
			<view class="card-title">评语 <text class="desc">(0-299字)</text></view>
			<view class="divider"></view>
			<textarea class="comment-input" v-model="submitInfo.content" maxlength="299" placeholder="请留下您宝贵的意见和建议……" />
		</view>
		<!-- 照片卡片 -->
		<view class="card">
			<view class="card-title">照片 <text class="desc">(选填)</text></view>
			<view class="divider"></view>
			<view class="photo-upload">
				<view class="photo-box" @click="choosePhoto">
					<text class="plus">+</text>
					<text class="upload-text">上传照片</text>
				</view>
				<image v-for="(img, index) in photo" :key="index" class="photo-img" :src="img.url" @click="choosePhoto" />
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="submit-bar">
			<button class="submit-btn" @click="submit">提交</button>
		</view>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import baseUrl from '../../../../utils/urlConfig'
// import { JsonWebTokenError } from 'jsonwebtoken'

const shop_name = ref('汽车商家')
const star = ref(0)
const comment = ref('')
const photo = reactive([])
const submitInfo = ref({
	userId:'',
	mid:3,
	orderId: 1 ,
	rate:'',
	imgs:'',
	content:'我勒个骚刚',
})

function setStar(val) {
	star.value = val
}
onMounted(() => {
	console.log(uni.getStorageSync('user').carUser.id);
})
function choosePhoto() {
	uni.chooseImage({
		count: 1,
		success: res => {
			const tempFilePaths = res.tempFilePaths[0];
			uni.uploadFile({
				url: baseUrl+'/file/upload',
				filePath: tempFilePaths,
				name: 'file',
				header: {
					Authorization: uni.getStorageSync('Token')
				},
				success: (uploadRes) => {
					const data = JSON.parse(uploadRes.data);
					console.log('图片上传成功', data);
					try {
						// 创建一个新数组并添加新元素
						const newPhotos = [...photo, { url: data.data.url , name: data.data.name }];
						// 替换整个数组
						photo.length = 0;
						newPhotos.forEach(item => photo.push(item));
					} catch (error) {
						console.error('解析接口返回数据失败', error);
						uni.showToast({
							title: '解析接口返回数据失败',
							icon: 'none'
						});
					}
				},
				fail: (err) => {
					console.error('图片上传失败', err);
					uni.showToast({
						title: '图片上传失败',
						icon: 'none'
					});
				}
			});
		}
	})
}

function submit() {
	// 获取当前用户的ID
	console.log('当前用户ID:', uni.getStorageSync('user'));
	submitInfo.value.userId = uni.getStorageSync('user').carUser.id;
	submitInfo.value.imgs = photo.map(item => item.url).join(',');
	console.log('提交评价数据:', submitInfo.value);
	uni.request({
		url: baseUrl+'/yyq/evaluation',
		method: 'POST',
		data: submitInfo.value,
		header: {
			Authorization: uni.getStorageSync('Token')
		},
		success: res => {
			console.log('评价提交成功', res.data);
		}
	})
}

function goBack() {
	uni.navigateBack()
}
</script>

<style>
.evaluate-container {
	min-height: 100vh;
	background: #f5f5f5;
}
.evaluate-header {
	background: linear-gradient(90deg, #2B9EFF 0%, #1890FF 100%);
	color: #fff;
	display: flex;
	align-items: flex-end;
	height: 120rpx;
	position: relative;
	padding: 0 30rpx 20rpx 30rpx;
	box-sizing: border-box;
}
.header-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-left: 0;
	margin-bottom: 6rpx;
	flex: 1;
	text-align: center;
}
.back-arrow {
	font-size: 40rpx;
	margin-right: 20rpx;
	margin-bottom: 4rpx;
	z-index: 2;
}
.card {
	background: #fff;
	border-radius: 16rpx;
	margin: 30rpx 20rpx 0 20rpx;
	padding: 30rpx 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
}
.card-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.desc {
	font-size: 24rpx;
	color: #999;
	margin-left: 10rpx;
}
.divider {
	height: 2rpx;
	background: #f0f0f0;
	margin: 18rpx 0;
}
.service-row {
	display: flex;
	align-items: center;
}
.shop-img {
	width: 120rpx;
	height: 80rpx;
	border-radius: 8rpx;
	margin-right: 20rpx;
}
.shop-info {
	flex: 1;
}
.shop-name {
	font-size: 28rpx;
	font-weight: 500;
	margin-bottom: 10rpx;
	display: block;
}
.star-row {
	display: flex;
	align-items: center;
}
.star-img {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}
.comment-input {
	width: 100%;
	min-height: 120rpx;
	border-radius: 16rpx;
	border: 1rpx solid #ddd;
	padding: 16rpx;
	font-size: 28rpx;
	background: #fafbfc;
	margin-top: 10rpx;
}
.photo-upload {
	display: flex;
	align-items: center;
	margin-top: 10rpx;
}
.photo-box {
	width: 140rpx;
	height: 140rpx;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #bbb;
	font-size: 28rpx;
	background: #fafbfc;
}
.plus {
	font-size: 48rpx;
	margin-bottom: 8rpx;
}
.upload-text {
	font-size: 24rpx;
}
.photo-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 12rpx;
	object-fit: cover;
}
.submit-bar {
	margin: 60rpx 0 0 0;
	display: flex;
	justify-content: center;
}
.submit-btn {
	width: 80%;
	height: 90rpx;
	border-radius: 45rpx;
	background: linear-gradient(90deg, #2B9EFF 0%, #1890FF 100%);
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
}
</style>
